<template>
  <div>
    <el-dialog
      title="查看"
      ref="tableDialog"
      :visible.sync="dialogVisible"
      width="80%"
      v-if="data"
      @close="close"
    >
      <el-tabs type="card" v-model="tabIndex">
        <el-tab-pane label="申请单" name="1"></el-tab-pane>
        <el-tab-pane label="车辆安排" name="2"></el-tab-pane>
        <el-tab-pane label="历史流程" name="3"></el-tab-pane>
      </el-tabs>

      <el-row v-show="tabIndex=='3'">
        <el-col :sm="24">
          <el-table :data="history" style="width: 100%" size="mini" border>
            <el-table-column prop="taskName" label="步骤" align="center"></el-table-column>
            <el-table-column prop="userName" label="审核人" align="center"></el-table-column>
            <el-table-column prop="mobile" label="电话" align="center"></el-table-column>
            <el-table-column prop="mark" label="审批意见" align="center"></el-table-column>
            <el-table-column prop="passStr" label="状态" align="center"></el-table-column>
            <el-table-column prop="optime" label="操作时间" align="center"></el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <el-form label-width="100px" v-show="tabIndex=='2'" v-if="data">
        <el-row v-for="(item, index) in data.usecaritems" :key="index">
          <el-col :sm="6">
            <el-form-item label="司机">{{item.driverName}}</el-form-item>
          </el-col>
          <el-col :sm="6">
            <el-form-item label="车辆">{{item.carcode}}</el-form-item>
          </el-col>
          <el-col :sm="6">
            <el-form-item label="司机手机号">{{item.phone}}</el-form-item>
          </el-col>
          <el-col :sm="6">
            <el-button type="primary" size="mini" @click="viewTrace(item)">行程轨迹</el-button>
          </el-col>
        </el-row>
        <div v-if="data&&data.usecaritems&&data.usecaritems.length==0">暂未安排</div>
      </el-form>
      <el-form :model="data" label-width="100px" ref="form" v-show="tabIndex=='1'">
        <el-row>
          <el-col :sm="12">
            <el-form-item label="申请人">{{data.userName}}</el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="所在单位">{{data.companyName}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :sm="12">
            <el-form-item label="申请时间">{{data.createtime}}</el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="用车理由">{{data.reason}}</el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :sm="12">
            <el-form-item label="用车人数">{{data.pcount}}人</el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="用车数">{{data.carcount}}辆</el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :sm="12">
            <el-form-item label="开始时间">{{data.starttime}}</el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="结束时间">{{data.endtime}}</el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :sm="12">
            <el-form-item label="始发地">{{data.origin}}</el-form-item>
          </el-col>
          <el-col :sm="12">
            <el-form-item label="目的地">{{data.destination}}</el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :sm="24">
            <el-form-item label="申请备注">{{data.mark}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :sm="24">
            <el-form-item label="状态">{{data.processType}}</el-form-item>
          </el-col>
        </el-row>
        <!-- 
        <template v-if="data.driverId">
          <el-divider>调度信息</el-divider>
          <el-row>
            <el-col :sm="12">
              <el-form-item label="司机姓名">{{data.driverName}}</el-form-item>
            </el-col>
            <el-col :sm="12">
              <el-form-item label="车辆">{{data.carName}}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :sm="12">
              <el-form-item label="接送时间">{{data.jstime}}</el-form-item>
            </el-col>
            <el-col :sm="12">
              <el-form-item label="接送地点">{{data.jsaddress}}</el-form-item>
            </el-col>
          </el-row>
        </template>-->

        <!-- <el-row>
          <el-col :sm="2">
            <el-form-item label="历史流程"></el-form-item>
          </el-col>
          <el-col :sm="history.length*6>18?18:history.length*6">
            <div style="overflow: hidden;">
              <el-steps :active="history.length-1" align-center>
                <el-step
                  :title="item.taskName+(item.passStr||'')"
                  v-for="(item, index) in history"
                  :key="index"
                >
                  <div slot="description">
                    <span style="white-space: nowrap;">操作人：{{item.userName}}</span>
                    <br />
                    <span style="white-space: nowrap;">{{item.optime}}</span>
                    <br />
                    备注：{{item.mark||' - '}}
                  </div>
                </el-step>
              </el-steps>
            </div>
          </el-col>
        </el-row>-->
      </el-form>
      <span slot="footer" class="dialog-footer" style="text-align: left;">
        <el-button @click="close">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { viewJson } from "@/api/task";
export default {
  data() {
    return {
      data: {},
      history: [],
      dialogVisible: false,
      tabIndex: "1",
    };
  },
  methods: {
    close() {
      this.dialogVisible = false;
    },
    //查看详情 父组件调用
    async showDetail(id, prcid) {
      let r = await viewJson({
        tableId: id,
        pid: prcid,
        formKey: "ddusecar",
      });
      let { history, usecar } = r;
      this.data = usecar;
      this.history = history;
      this.history.splice(0, 0);
      this.dialogVisible = true;
    },
    viewTrace(item) {
      if (new Date(this.data.endtime) < new Date(item.createtime)) {
        this.$message({
          message: "非法数据：调度时间大于行程结束时间,无法查看行程",
          type: "error",
        });
        return;
      }
      this.$router.push({
        name: "trace",
        params: {
          carcode: item.carcode,
          startTime: new Date(item.createtime).getTime(),
          endTime: new Date(this.data.endtime).getTime(),
        },
      });
      // this.$router.push({
      //   name: "trace",
      //   params: {
      //     carcode: item.carcode,
      //     startTime: 1591002290986,
      //     endTime: 1592298290986
      //   }
      // });
    },
  },
};
</script>